/*翻页*/
@keyframes slideRightToCenter {
    from {
        transform: translate3d(100%, 0, 0);
    }
    to {
        transform: translate3d(0%, 0, 0);
    }
}
@keyframes slideCenterToLeft {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-60%, 0, 0);
    }
}

@keyframes slideLeftToCenter {
    from {
        transform: translate3d(-60%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
@keyframes slideCenterToRight {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(100%, 0, 0);
    }
}

.forward-transition,
.back-transition{
    will-change: transform;
}

.forward-enter {
    animation: slideRightToCenter .4s forwards;
}
.forward-leave {
    animation: slideCenterToLeft .4s forwards;
}

.back-enter {
    animation: slideLeftToCenter .4s forwards;
}
.back-leave {
    animation: slideCenterToRight .4s forwards;
}

.forward-enter,
.back-leave{
    z-index: 1 !important;
}

.load-transition {
    transition: all .3s ease;
}

.load-enter, .load-leave {
    opacity: 0.8;
}